全局样式重置
/* 重置所有元素的默认边距和内边距，并设置盒模型为border-box */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  width: 100%;
  height: 100%;  
} 

/* 基础页面样式 */
/* 设置html和body元素的基本样式，包括尺寸、字体、行高等 */
html, body ,h1{
  width: 100%;
  height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: #333;
  background-color: #fff;
  margin: 0;
  padding: 0;
}

/* 链接样式 */
/* 移除链接的下划线，继承父元素颜色 */
a {
  text-decoration: none;
  color: inherit;
}

/* 列表样式 */
/* 移除列表的默认样式（项目符号） */
ul, ol {
  list-style: none;
}

/* 按钮样式 */
/* 移除按钮的默认边框和背景，添加手型光标 */
button {
  border: none;
  background: none;
  cursor: pointer;
}

/* 图片样式 */
/* 确保图片响应式显示，防止溢出容器 */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* 响应式布局容器 */
/* 创建一个最大宽度为1200px的响应式容器，左右有15px的内边距 */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
}

/* Flex布局工具类 */
/* 基础flex布局 */
.flex {
  display: flex;
}

/* 居中对齐的flex布局 */
.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 间距工具类 */
/* 上边距工具类：从0.25rem到2rem的5个等级 */
.mt-1 { margin-top: 0.25rem; } /* 最小上边距 */
.mt-2 { margin-top: 0.5rem; }  /* 小上边距 */
.mt-3 { margin-top: 1rem; }    /* 中等上边距 */
.mt-4 { margin-top: 1.5rem; }  /* 大上边距 */
.mt-5 { margin-top: 2rem; }    /* 最大上边距 */

/* 下边距工具类：从0.25rem到2rem的5个等级 */
.mb-1 { margin-bottom: 0.25rem; } /* 最小下边距 */
.mb-2 { margin-bottom: 0.5rem; }  /* 小下边距 */
.mb-3 { margin-bottom: 1rem; }    /* 中等下边距 */
.mb-4 { margin-bottom: 1.5rem; }  /* 大下边距 */
.mb-5 { margin-bottom: 2rem; }    /* 最大下边距 */


 